<template>
	<view>
		<back :showBackText="false" customClass="bg-gradual-blue text-white" :title="title"></back>
		<view class="cu-list  menu" style="margin-top: 5rpx;" v-for="(item, index) in cateList" :key="index">
			<view class="cu-item" @tap="chapterTap(index)" :data-index="index">
				<view class="content padding-tb-sm">
					<view><text class="text-blue" style="margin-right: 12rpx;"
							:class="'cuIcon-' + (item['isOpen'] ? 'roundrightfill' : 'rounddown')"></text>{{ item['name'] }}
					</view>
				</view>
			</view>
			<view :class="'cu-item ' + (item['isOpen'] ? '' : 'piano-hidden-content')"
				v-for="(child, childIndex) in item.childs" :key="childIndex" @tap="sectionTap(child)">
				<view class="content">
					<text style="margin-left: 40rpx;font-size: 30upx;"> {{ child.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<style src="./category.css"></style>
<script src="./category.js"></script>